import { connect } from 'react-redux';
import { useState } from 'react';

import {
  createIncrementAction,
  createDecrementAction,
  createIncrementAsyncAction,
} from '../redux/action/counter';

// eslint-disable-next-line react-refresh/only-export-components
function Counter(props) {
  const [step, setStep] = useState(1);

  const increment = () => {
    props.increment(step * 1);
  };
  const decrement = () => {
    props.decrement(step * 1);
  };
  const incrementSync = () => {
    props.incrementAsync(step * 1, 500);
  };

  return (
    <>
      <div>
        <h2>Counter 组件: {props.count}，下方组件总人数：{props.person.length}</h2>
        step:{' '}
        <input
          type="number"
          value={step}
          step={1}
          onChange={e => setStep(e.target.value)}
        />
        <button onClick={increment}>增加</button>
        <button onClick={decrement}>减去</button>
        <button onClick={incrementSync}>异步增加</button>
      </div>
    </>
  );
}

// eslint-disable-next-line react-refresh/only-export-components
export default connect(
  state => ({
    count: state.count,
    person: state.person
  }),
  // 自动分发action
  {
    increment: createIncrementAction,
    decrement: createDecrementAction,
    incrementAsync: createIncrementAsyncAction,
  },
)(Counter);
